<template>
  <div class="custWatch">
    <!-- 客户视图界面 -->
    <div class="user_info">
      <!-- 顶部样式 -->
      <div class="user_tit">
        <span>&lt;</span>
        <van-icon name="wap-home-o" />
      </div>
      <!-- 用户基本信息样式 -->
      <div class="user_info_son">
        <div class="photo_use">
          <img src="" alt="" />
        </div>
        <div class="use_text">
          <p>
            <span>名称</span><span>{{ custVal.custName }}</span>
          </p>
          <p>
            <span>电话</span><span>{{ custVal.telephone }}</span>
          </p>
        </div>
        <div class="btn_use_info" @click="userInfo(custVal.id)">客户信息</div>
      </div>
    </div>
    <!-- tab切换 -->
    <van-tabs v-model="active" title-active-color="#003399">
      <van-tab>
        <template #title>
          <img :src="img1" alt="" />
          收入分析
        </template>
        <div class="cost_one">
          <div class="one_top">
            <div class="one_up">
              <div class="money">
                <p>今年</p>
                <span>{{ yearIncome }}</span>
              </div>
              <div class="money">
                <p>总收入</p>
                <span>{{ totalIncome }}</span>
              </div>
            </div>
            <div class="addUp">
              <span>同比</span><span>{{ contrastVal }}</span>
            </div>
          </div>
          <div class="cost_body">
            <div class="body_tit">
              <img :src="img2" alt="" />
              <span>收入统计</span>
            </div>
            <ul>
              <li v-for="(item, index) in newList" :key="index">
                <span>{{ item.year }}</span
                ><span>{{ item.income }}</span>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
      <van-tab>
        <template #title>
          <img :src="img1" alt="" />
          旗下企业
        </template>
        <div class="cont_two">
          <ul>
            <li v-for="(item, index) in qiyeVal.data" :key="index">
              <div class="use_img"></div>
              <div class="use_info">
                <p>
                  <span>企业名称：</span><span>{{ item.company }}</span>
                </p>
                <p>
                  <span>注册时间：</span><span>{{ item.createTime }}</span>
                </p>
                <p>
                  <span>法人：</span><span>{{ item.creator }}</span>
                </p>
              </div>
              <div class="rig">&gt;</div>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab>
        <template #title>
          <img :src="img1" alt="" />
          合作伙伴
        </template>
        <div class="cont_two">
          <ul>
            <li v-for="(item, index) in huobanVal.data" :key="index">
              <div class="use_img"></div>
              <div class="use_info">
                <p>
                  <span>{{ item.creator }}</span>
                </p>
                <p>
                  <span>{{ item.company }}</span>
                </p>
                <p>
                  <span>成立时间：</span><span>{{ item.createTime }}</span>
                </p>
              </div>
              <div class="rig">&gt;</div>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab>
        <template #title>
          <img :src="img1" alt="" />
          当年收入
        </template>
        <div class="cont_four">
          <ul>
            <li v-for="(item, index) in yearIncoVal.data" :key="index">
              <span>{{ item.month }}月</span><span>{{ item.income }}</span>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 客户详细信息模块 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { GetCustWatch } from "@/request/api";
export default {
  data() {
    return {
      active: 0,
      img1: require("@/assets/收入分析.png"),
      img2: require("@/assets/收入统计.png"),
      //   全部数据
      custVal: "",
      //   收入分析数据
      shouruVal: "",
      yearIncome: "",
      totalIncome: "",
      contrastVal: "",
      listVal: [],
      // 旗下企业的数据
      qiyeVal: "",
      // 合作伙伴数据
      huobanVal: "",
      // 当年收入数据
      yearIncoVal: "",
    };
  },
  created() {
    // console.log(this.$route.query.id);
    GetCustWatch({
      id: this.$route.query.id,
    }).then((res) => {
      // console.log(res.data);
      this.custVal = res.data;
      // 收入分析里面渲染的数据
      this.shouruVal = res.data.datas[0];
      // console.log(this.shouruVal);
      this.yearIncome = this.shouruVal.data.year;
      this.totalIncome = this.shouruVal.data.total;
      this.contrastVal = this.shouruVal.data.contrast;
      this.listVal = this.shouruVal.data.list;
      // console.log(this.newList);
      // 旗下企业的数据
      this.qiyeVal = res.data.datas[3];
      // console.log(this.qiyeVal);
      // 合作伙伴数据
      this.huobanVal = res.data.datas[2];
      // console.log(this.huobanVal);
      // 当年收入数据
      this.yearIncoVal = res.data.datas[1];
      // console.log(this.yearIncoVal);
    });
  },
  computed: {
    // 将收入分析里面的时间重新排序
    newList() {
      return this.listVal.sort(function (a, b) {
        return Date.parse(b.year) - Date.parse(a.year);
      });
    },
  },
  methods: {
    userInfo(val) {
      this.$router.push("/cust/custwatch/custinfo?id=" + val);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.custWatch {
  min-height: 100%;
  width: 100%;
  background-color: #efefef;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  /* 上部蓝色样式 */
  .user_info {
    width: 100%;
    height: 1.8rem;
    background-color: #003399;
    padding: 0.2rem 0.2rem 0;
    box-sizing: border-box;
    position: relative;
    .user_tit {
      width: 100%;
      color: white;
      font-size: 0.3rem;
      display: flex;
      justify-content: space-between;
    }
    .user_info_son {
      height: 1.1rem;
      width: 80%;
      background-color: white;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%);
      border-radius: 0.15rem 0.15rem 0 0;
      .photo_use {
        height: 0.8rem;
        width: 0.8rem;
        background-color: wheat;
        border-radius: 50%;
        position: absolute;
        left: 0.15rem;
        top: 0.5rem;
        margin-top: -0.35rem;
      }
      .use_text {
        position: absolute;
        left: 1.1rem;
        top: 0.4rem;
        p {
          line-height: 0.16rem;
          &:nth-child(2) {
            color: #aaa;
          }
        }
      }
      .btn_use_info {
        height: 0.25rem;
        width: 0.8rem;
        background-color: orange;
        position: absolute;
        top: 0.2rem;
        right: 0;
        border-radius: 0.1rem 0 0 0.1rem;
        color: white;
        text-align: center;
        line-height: 0.25rem;
      }
    }
  }
  /* tab栏样式 */
  .van-tab {
    img {
      width: 0.18rem;
      display: block;
      margin: 0 auto;
    }
  }
  /* 下方主体样式 */
  .cost_one {
    width: 94%;
    margin: 0 auto;
    .one_top {
      width: 100%;
      background-color: white;
      padding: 0.2rem;
      box-sizing: border-box;
      border-bottom: 0.01rem solid #ccc;
      .one_up {
        display: flex;
        .money {
          width: 49%;
          margin-left: 0.15rem;
          &:first-child {
            border-right: 1px solid #aaa;
          }
          p {
            line-height: 0.2rem;
            color: #aaa;
          }
          span {
            font-size: 0.22rem;
            color: #ffcc33;
          }
        }
      }
      .addUp {
        height: 0.26rem;
        width: 0.8rem;
        /* background-color: #aaa; */
        background-image: url("../assets/底框.png");
        background-size: cover;
        text-align: center;
        line-height: 0.3rem;
        font-size: 0.12rem;
        margin-top: 0.05rem;
        span {
          &:nth-child(2) {
            color: #003399;
          }
        }
      }
    }
    .cost_body {
      width: 100%;
      padding: 0.2rem;
      box-sizing: border-box;
      background-color: white;
      .body_tit {
        padding-bottom: 0.15rem;
        img {
          width: 0.2rem;
          vertical-align: top;
        }
        span {
          font-size: 0.18rem;
          margin-left: 0.1rem;
          color: #999;
        }
      }
      ul {
        border-bottom: 1px solid #bbb;
        li {
          line-height: 0.35rem;
          border-top: 1px solid #bbb;
          display: flex;
          justify-content: space-between;
          span {
            &:nth-child(2) {
              color: #ffcc33;
            }
          }
        }
      }
    }
  }
  /* 旗下企业与合作伙伴列表样式 */
  .cont_two {
    width: 94%;
    margin: 0 auto;
    background-color: white;
    padding: 0.1rem;
    box-sizing: border-box;
    margin-top: 0.1rem;
    ul {
      li {
        padding: 0.1rem;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        .use_img {
          height: 0.7rem;
          width: 0.7rem;
          background-color: #ffcc33;
        }
        .use_info {
          flex: 1;
          p {
            margin-left: 0.1rem;
            line-height: 0.2rem;
            &:nth-child(2),
            &:nth-child(3) {
              color: #aaa;
            }
          }
        }
        .rig {
          line-height: 0.7rem;
          font-size: 0.2rem;
        }
      }
    }
  }
  /* 当年收入样式 */
  .cont_four {
    width: 94%;
    margin: 0 auto;
    ul {
      li {
        width: 100%;
        padding: 0.2rem;
        background-color: white;
        margin-top: 0.1rem;
        box-sizing: border-box;
        border-radius: 0.1rem;
        display: flex;
        justify-content: space-between;
        span {
          &:nth-child(2) {
            font-size: 0.16rem;
            color: #003399;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>